<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/14
  Time: 9:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <form action="">
        账号:<input id="inp1" type="text" name="username" value="">
        <span id="s1"></span><br>
        手机号: <input id="inp2" type="text" name="phone" value="">
        <span id="s2"></span><br>
    </form>
</body>
</html>
<script>

    //给手机号失去焦点
    $("#inp2").blur(function () {
        //获取手机号
        var phone = $(this).val();
        if(phone == null || phone == "") {
            $("#s2").text("手机号不能为空");
            $("#s2").css("color","red");
            return;
        }

        //判断格式
        var reg = /^1[3-9]\d{9}$/;
        if(!reg.test(phone)) {
            $("#s2").text("手机号格式不对");
            $("#s2").css("color","red");
            return;
        }

        //判断唯一
        $.get("homework01Servlet",{mark:"phoneIsUnique",phone:phone},function (obj) {


            if(obj) {
                $("#s2").text("让注册");
                $("#s2").css("color","green");
            }else {
                $("#s2").text("已存在");
                $("#s2").css("color","red");
            }
        },"json");
    })



    //给账号一个失去焦点的事件
    $("#inp1").blur(function () {
        //获取用户输入的账号
        var username = $(this).val();
        //非空判断
        if(username == null || username == "") {
            //提示消息
            $("#s1").text("账号不能为空");
            $("#s1").css("color","red");
            return;
        }

        //唯一判断  查询数据库
        $.ajax({
            //请求的地址
            url:"homework01Servlet",
            //携带的参数
            data:{"username":username,mark:"usernameIsUnique"},
            //请求的类型
            type:"get",
            //返回的数据类型
            dataType:"json",
            //成功的回调函数
            success:function (obj) {
                //true  绿色 让注册    false  红色 不让注册
                if(obj) {
                    $("#s1").text("让注册");
                    $("#s1").css("color","green");
                }else {
                    $("#s1").text("已存在");
                    $("#s1").css("color","red");
                }
            }
        })



    })
</script>
